<template>
  <div
    :class="obj"
    class="query-select">
    <div v-show="modelShow" class="bg-model" @click="queryTag()">&nbsp;</div>
    <div
      :style="{'left':leftVal}"
      class="more-show" >
      <div class="show-title"><i class="iconfont icon-fanhui" @click="cancel">&nbsp;</i><span>{{ moreTitle }}</span></div>
      <div class="show-box">
        <bar-pic
          ref="barDom"
          :obj="showMoreBox"
          :is-more="false"
          :is-sum="false"/>
      </div>
    </div>
  </div>
</template>
<script>
import BarPic from '@/components/bar/bar'
export default {
  components: {
    BarPic
  },
  props: {
    obj: {
      type: String,
      default: ''
    },
    moreTitle: {
      type: String,
      default: ''
    },
    leftVal: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {
      selectBox: '',
      selectShow: false,
      modelShow: false,
      showMoreBox: 'showMoreBox'
    }
  },
  methods: {
    // 打开层级选择
    showMore (showMoreObj, ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
      this.modelShow = true
      this.$nextTick(() => {
        this.$refs.barDom.barData(
          showMoreObj.yaisxData,
          showMoreObj.xAxisData,
          showMoreObj.barTitle,
          showMoreObj.unit
        )
      })
    },
    // 取消层级选择
    cancel (ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
      this.modelShow = false
      window.setTimeout(() => {
        this.selectShow = false
        this.$emit('closeShowMore')
      }, 600)
    },
    // 确定选择关闭城市选择组件
    confirmSelect () {
      this.modelShow = false
      window.setTimeout(() => {
        this.selectShow = false
        this.$emit('closeShowMore')
      }, 600)
    },
    queryTag (ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/mixin';
$f_color : #138cef;
$bg_color_s : #138cef;
$bg_color: #07112C;
$f_size:.26rem;
.query-select{
    position: fixed;
    z-index: 1004;
    display: inline-block;
    border: .02rem solid $f_color;
    padding:0 .5rem 0 .2rem;
    height:100%;
    width: 100%;
    font-size: $f_size;
    .bg-model {
      position: fixed;
      top: 0;
      left:0;
      z-index: 1005;
      color:$f_color;
      font-size: $f_size;
      background: $bg_color;
      opacity: .3;
      width: 100%;
      height: 100%;
    }
    .more-show{
        @include transition(left);
        position: fixed;
        top:0;
        z-index: 1006;
        color:$f_color;
        font-size: $f_size;
        background: $bg_color;
        width: 100%;
        height: 100%;
        padding-bottom: .05rem;
        .show-title{
          width: 100%;
          height: .7rem;
          line-height: .7rem;
          position: relative;
          left: 0;
          top: 0;
          background: #ffffff;
          color: #333333;
          text-align: center;
          font-size: .34rem;
          border-bottom: .01rem solid $f_color;
          span {
            display: inline-block;
            height: .7rem;
            line-height: .7rem;
            text-align: center;
            font-size: .34rem;
            margin: 0 .4rem;
            white-space: nowrap;
            text-overflow:ellipsis;
            width:100%;
          }
          i {
              position: absolute;
              left:.08rem;
              top:0;
              margin-right: .06rem;
              font-size: .34rem;
              &.active{
                color:#ff0000;
              }
            }
        }
        .show-box{
            width: 95%;
            position: relative;
            height:95%;
            padding: 0 .2rem;
            overflow: hidden;
            overflow-y: auto;
        }

    }

}
</style>
